<template>
    <div class="constainer" v-if="textData">
        <div class="constainer-content">
            <div class="title">
                <h1>{{ textData.title }}</h1>
                <div class="author">
                    <!-- <div class="author-left">
                        <p class="office">海南12345</p>
                        <p>{{ textData.creater }}</p>
                    </div> -->
                    <div class="author-right">
                        <p>{{ textData.create_time }}</p>
                    </div>
                </div>
            </div>
            <div class="content">
                {{ textData.content }}
            </div>
            <div class="wu">我也是有底线的</div>
            <div class="close" @click="close()">
                <svg
                    class="icon"
                    width="24px"
                    height="24px"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        fill="#ffffff"
                        d="M562.281173 510.800685l294.996664-293.466821c13.94971-13.878079 14.020318-36.367279 0.14224-50.316989-13.913894-13.984503-36.367279-14.020318-50.316989-0.14224L512.034792 460.377272 219.528855 166.982082c-13.842263-13.878079-36.367279-13.94971-50.316989-0.071631-13.913894 13.878079-13.948687 36.403095-0.071631 50.352805L461.576587 510.587837 166.721139 803.876604c-13.94971 13.878079-14.020318 36.367279-0.14224 50.316989 6.939039 6.974855 16.084327 10.497075 25.229614 10.497075 9.073656 0 18.148335-3.451612 25.087375-10.354835l294.926056-293.360398 295.17472 296.064996c6.939039 6.974855 16.048511 10.462283 25.193799 10.462283 9.109472 0 18.184151-3.487428 25.12319-10.390651 13.913894-13.878079 13.94971-36.367279 0.071631-50.316989L562.281173 510.800685z"
                    />
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import api from "../api/api";
export default {
    props: ["textData"],
    methods: {
        close() {
            this.$emit("close");
        },
        initSrcoll() {
            new BScroll(this.$refs.wrapper, {
                click: true,
                scrollY: true,
                probeType: 3,
            });
        },
    },
    mounted() {
        // this.$nextTick(()=>{
        //     this.initSrcoll()
        // })
    },
};
</script>

<style lang="less" scoped>
.constainer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    overflow-y: scroll;
    .title {
        padding: 30px;
        font-size: 36px;
        color: #000;
        .author {
            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .author-left {
                display: flex;
                align-items: center;
                p {
                    font-size: 26px;
                    margin-right: 20px;
                    color: #333;
                }
            }
            .author-right {
                p {
                    font-size: 26px;
                    color: #333;
                }
            }
        }
    }
    .content {
        padding: 0 30px;
        text-indent: 2em;
        font-size: 28px;
        line-height: 50px;
        letter-spacing: 5px;
        color: #000;
    }
    .wu {
        width: 100%;
        padding: 50px 0;
        padding-bottom: 180px;
        text-align: center;
        font-size: 20px;
        color: #ddd;
    }
    .close {
        position: fixed;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.4);
    }
}
</style>